<template>
  <div class="sidebar-container" :class="{ 'is-collapsed': isCollapsed }">
    <div class="sidebar-header">
      <h1 class="title">{{ title }}</h1>
      <div class="collapse-btn" @click="toggleCollapse">
        <el-icon>
          <component :is="isCollapsed ? 'Expand' : 'Fold'" />
        </el-icon>
      </div>
    </div>
    <el-menu :default-active="activeMenu" class="sidebar-menu" :collapse="isCollapsed" :unique-opened="true" :collapse-transition="false" router>
      <template v-for="item in menuItems" :key="item.path">
        <el-sub-menu v-if="item.children && item.children.length" :index="item.path">
          <template #title>
            <el-icon><component :is="item.icon" /></el-icon>
            <span>{{ item.title }}</span>
          </template>
          <el-menu-item v-for="child in item.children" :key="child.path" :index="child.path" @click="handleMenuClick(child)">
            <el-icon><component :is="child.icon" /></el-icon>
            <span>{{ child.title }}</span>
          </el-menu-item>
        </el-sub-menu>
        <el-menu-item v-else :index="item.path" @click="handleMenuClick(item)">
          <el-icon><component :is="item.icon" /></el-icon>
          <span>{{ item.title }}</span>
        </el-menu-item>
      </template>
    </el-menu>
    <div class="sidebar-account-selector">
      <AccountSelector />
    </div>
  </div>
</template>

<script setup lang="ts">
import { ref, watch } from 'vue';
import { useRouter } from 'vue-router';
import AccountSelector from '../AccountSelector.vue';

export interface MenuItem {
  path: string;
  title: string;
  icon?: string;
  children?: MenuItem[];
}

const props = defineProps({
  title: {
    type: String,
    default: '系统菜单'
  },
  menuItems: {
    type: Array as () => MenuItem[],
    required: true
  },
  defaultActive: {
    type: String,
    default: ''
  }
});

const emit = defineEmits(['menu-click']);
const router = useRouter();
const isCollapsed = ref(false);
const activeMenu = ref(props.defaultActive);

// 监听路由变化
watch(
  () => router.currentRoute.value.path,
  (newPath: string) => {
    activeMenu.value = newPath;
  },
  { immediate: true }
);

const toggleCollapse = () => {
  isCollapsed.value = !isCollapsed.value;
};

const handleMenuClick = (item: MenuItem) => {
  emit('menu-click', item);
};

defineOptions({
  name: 'CollSidebar'
});
</script>

<style lang="scss" scoped>
.sidebar-container {
  height: 100%;
  background: linear-gradient(180deg, #ffffff 0%, #f8f9fa 100%);
  transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  width: 240px;
  box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.08);
  display: flex;
  flex-direction: column;

  &.is-collapsed {
    width: 64px;
  }

  .sidebar-header {
    height: 60px;
    padding: 0 20px;
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: linear-gradient(90deg, #ffffff 0%, #f8f9fa 100%);
    color: #303133;
    border-bottom: 1px solid rgba(230, 230, 230, 0.8);
    backdrop-filter: blur(10px);

    .title {
      font-size: 18px;
      font-weight: 600;
      margin: 0;
      white-space: nowrap;
      overflow: hidden;
      text-overflow: ellipsis;
      color: #303133;
      letter-spacing: 0.5px;
    }

    .collapse-btn {
      cursor: pointer;
      font-size: 20px;
      transition: all 0.3s ease;
      color: #606266;
      padding: 8px;
      border-radius: 4px;

      &:hover {
        color: #409eff;
        background-color: rgba(64, 158, 255, 0.1);
        transform: scale(1.1);
      }
    }
  }

  .sidebar-menu {
    border: none;
    background-color: transparent;
    padding: 8px 0;

    :deep(.el-menu-item),
    :deep(.el-sub-menu__title) {
      color: #606266;
      height: 50px;
      line-height: 50px;
      margin: 4px 8px;
      border-radius: 6px;
      transition: all 0.3s ease;

      &:hover {
        color: #409eff;
        background-color: rgba(64, 158, 255, 0.1);
        transform: translateX(4px);
      }

      &.is-active {
        color: #409eff;
        background-color: rgba(64, 158, 255, 0.1);
        font-weight: 500;
        box-shadow: 0 2px 8px rgba(64, 158, 255, 0.2);
      }
    }

    :deep(.el-sub-menu__title) {
      &:hover {
        background-color: rgba(64, 158, 255, 0.1);
      }
    }

    :deep(.el-menu-item) {
      &.is-active {
        &::before {
          content: '';
          position: absolute;
          left: 0;
          top: 8px;
          bottom: 8px;
          width: 3px;
          background: linear-gradient(180deg, #409eff 0%, #79bbff 100%);
          border-radius: 0 2px 2px 0;
        }
      }
    }
  }

  .sidebar-account-selector {
    margin-top: auto;
    border-top: 1px solid #eee;
    background: #fff;
  }
}
</style>